import React,{PureComponent} from 'react'
import {Button,StyleSheet,Text,TouchableOpacity, Image,View,Dimensions,Modal,SectionList,ListView} from 'react-native'

const {width} = Dimensions.get('window')


type Props = {
    callbackSubject:Function,

    selectIndexString:string,
}


export default class SelectSubjectModalCell extends PureComponent<Props>{
    constructor(props){
        super(props)
    }
    render(){
        if (this.props.selectIndexString == this.props.value.name){
            return (
                <TouchableOpacity onPress={()=>{this.callBack()}}>
                    <View style={styles.row_select}>
                        <Text style={styles.row_txt_select}>
                            {this.props.value.name}
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        }else {
           return (
               <TouchableOpacity onPress={()=>{this.callBack(this.props.value)}}>
                   <View style={styles.row}>
                       <Text style={styles.row_txt}>
                           {this.props.value.name}
                       </Text>
                   </View>
               </TouchableOpacity>
           )
        }
    }
    callBack(){
        this.props.callbackSubject(this.props.value)
    }
}

const styles = StyleSheet.create({
    row:{
        backgroundColor: '#FFFFFF',
        justifyContent: 'center',
        alignItems: 'center',
        width: 57,
        height: 29,
        borderRadius:15,
        borderWidth:1,
        borderColor:'#D9D6D6',
        marginRight:30,
        marginBottom:13,
    },
    row_txt:{
        color:'rgba(0,0,0,0.5)',
        fontSize:12,
    },
    row_select:{
        backgroundColor: '#DB3843',
        justifyContent: 'center',
        alignItems: 'center',
        width: 57,
        height: 29,
        borderRadius:15,
        marginRight:30,
        marginBottom:13,
    },
    row_txt_select:{
        color:'#FFFFFF',
        fontSize:12,
    },
})